<template>
    <div class="container">
        <!--    ============================= 页面顶部header ==============================    -->
        <div class="header">
            <div class="header_top">
                <div class="pageTitle">创翔综合智慧平台物业</div>
                <div class="login" @click="login">登录</div>
            </div>
        </div>
        <!--    ============================= 页面顶部header ==============================    -->
        <div class="content">
            <!--      进度条      -->
            <div class="progress">
                <div class="pic">
                    <img src="../../asset/login/s@2x.png" alt=""/>
                    <span>公司资质信息</span>
                </div>
                <div class="jiange" :class="progressIndex >= 2 ? 'active' : ''"></div>
                <div class="pic">
                    <img
                        v-if="progressIndex >= 2"
                        src="../../asset/login/s@2x.png"
                        alt=""
                    />
                    <img
                        v-if="progressIndex < 2"
                        src="../../asset/login/n@3x.png"
                        alt=""
                    />
                    <span>注册信息</span>
                </div>
                <div class="jiange" :class="progressIndex > 2 ? 'active' : ''"></div>
                <div class="pic">
                    <img
                        v-if="progressIndex >= 3"
                        src="../../asset/login/s@3x.png"
                        alt=""
                    />
                    <img
                        v-if="progressIndex < 3"
                        src="../../asset/login/n@3x.png"
                        alt=""
                    />
                    <span>店铺开通</span>
                </div>
            </div>
            <!--      公司资质信息      -->
            <div v-show="progressIndex === 1" class="componyMsg">
                <div class="contactPerson">
                    <div class="title">公司及联系人信息</div>
                    <div class="biaodan">
                        <a-form
                            :form="form"
                            action=""
                            :label-col="{ span: 8 }"
                            :wrapper-col="{ span: 16 }"
                        >
                            <a-row>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="企业名称">
                                        <a-input
                                            v-model="registerData.company_name"
                                            v-decorator="[
                        'company_name',
                        {
                          rules: [
                            { required: true, message: '请输入企业名称！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="统一社会信用代码">
                                        <a-input
                                            v-model="registerData.unified_social_credit_code"
                                            v-decorator="[
                        'unified_social_credit_code',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请输入统一社会信用代码！',
                            },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="法人代表">
                                        <a-input
                                            v-model="registerData.legal_person"
                                            v-decorator="[
                        'legal_person',
                        {
                          rules: [
                            { required: true, message: '请输入法人代表！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="企业详细地址">
                                        <a-input
                                            v-model="registerData.address"
                                            v-decorator="[
                        'address',
                        {
                          rules: [
                            { required: true, message: '请输入企业详细地址！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="注册资本">
                                        <a-input
                                            v-model="registerData.registered_capital"
                                            v-decorator="[
                        'registered_capital',
                        {
                          rules: [
                            { required: true, message: '请输入注册资本！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="成立日期">
                                        <a-date-picker
                                            v-model="registerData.date_of_establishment"
                                            style="width: 100%"
                                            placeholder="请选择成立日期"
                                            v-decorator="[
                        'date_of_establishment',
                        {
                          rules: [
                            { required: true, message: '请选择成立日期！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="联系人">
                                        <a-input
                                            v-model="registerData.contact_person"
                                            v-decorator="[
                        'contact_person',
                        {
                          rules: [
                            { required: true, message: '请输入联系人！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="电子邮箱">
                                        <a-input
                                            v-model="registerData.email"
                                            type="email"
                                            v-decorator="[
                        'email',
                        {
                          rules: [
                            { required: true, message: '请输入电子邮箱！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <a-form-item label="联系电话">
                                        <a-input
                                            v-model="registerData.contact_person_mobile"
                                            v-decorator="[
                        'contact_person_mobile',
                        {
                          rules: [
                            { required: true, message: '请输入联系电话！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :md="12" :sm="24">
                                    <div class="title">营业执照信息</div>
                                    <a-form-item label="营业执照号">
                                        <a-input
                                            v-model="registerData.business_license_no"
                                            v-decorator="[
                        'business_license_no',
                        {
                          rules: [
                            { required: true, message: '请输入营业执照号！' },
                          ],
                        },
                      ]"
                                        />
                                    </a-form-item>
                                    <a-form-item label="营业执照有效期">
                                        <a-range-picker
                                            v-model="registerData.validity_period_business_license"
                                            v-decorator="[
                        'validity_period_business_license',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择营业执照有效期！',
                            },
                          ],
                        },
                      ]"
                                            style="width: 100%"
                                        />
                                    </a-form-item>
                                    <a-form-item label="营业执照电子版">
                                        <a-upload
                                            list-type="picture-card"
                                            class="avatar-uploader"
                                            :show-upload-list="false"
                                            action="http://community.chuangxiangdianli.com/api/Seller/uploadImage"
                                            @change="handleChange"
                                        >
                                            <img
                                                v-if="imageUrl"
                                                :src="imageUrl"
                                                alt=""
                                                width="100px"
                                                height="auto"
                                            />
                                            <div v-else>
                                                <a-icon :type="loading ? 'loading' : 'plus'"/>
                                                <div class="ant-upload-text">点击上传</div>
                                            </div>
                                        </a-upload>
                                        <span style="font-size: 16px; color: #666666"
                                        >请确保图片清晰，文字可辨并有清晰的红色公章</span
                                        >
                                    </a-form-item>
                                </a-col>
                                <a-col :md="12" :sm="24">
                                    <div class="title">
                                        &ensp;&ensp;一般纳税人证明
                                        <span class="attend"
                                        >注：所属企业具有一般纳税人证明时，此项为必填</span
                                        >
                                    </div>
                                    <a-form-item label="一般纳税人证明">
                                        <a-upload
                                            list-type="picture-card"
                                            class="avatar-uploader"
                                            :show-upload-list="false"
                                            action="http://community.chuangxiangdianli.com/api/Seller/uploadImage"
                                            @change="handleChange1"
                                        >
                                            <img
                                                v-if="imageUrl1"
                                                :src="imageUrl1"
                                                alt="avatar"
                                                width="100px"
                                                height="auto"
                                            />
                                            <div v-else>
                                                <a-icon :type="loading1 ? 'loading' : 'plus'"/>
                                                <div class="ant-upload-text">点击上传</div>
                                            </div>
                                        </a-upload>
                                        <span style="font-size: 16px; color: #666666"
                                        >请确保图片清晰，文字可辨并有清晰的红色公章</span
                                        >
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div class="btn" @click="nextStep">下一步</div>
                        </a-form>
                    </div>
                </div>
            </div>
            <!--      注册信息      -->
            <div class="componyMsg" v-show="progressIndex === 2">
                <div class="zhuceMsg">
                    <div class="title" @click="progressIndex = 1">注册信息</div>
                    <a-form
                        :form="form1"
                        action=""
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 16 }"
                    >
                        <a-row>
                            <a-col :md="24" :sm="24">
                                <a-form-item label="手机号码">
                                    <a-input
                                        v-model="registerData.username"
                                        style="height: 50px; margin-top: -5px"
                                        v-decorator="[
                      'username',
                      {
                        rules: [
                          { required: true, message: '请输入手机号码！' },
                        ],
                      },
                    ]"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :md="24" :sm="24" style="margin: 15px 0">
                                <a-form-item label="验证码" style="margin-top: -5px">
                                    <a-input
                                        v-model="registerData.code"
                                        style="width: 334px; height: 50px; margin-top: -5px"
                                        v-decorator="[
                      'code',
                      {
                        rules: [{ required: true, message: '请输入验证码！' }],
                      },
                    ]"
                                    />
                                    <a-button @click="changeCountdown" class="countBtn">{{
                                            countdown
                                        }}
                                    </a-button>
                                </a-form-item>
                            </a-col>
                            <a-col :md="24" :sm="24">
                                <a-form-item label="输入密码">
                                    <a-input
                                        v-if="showFlag"
                                        v-model="registerData.password"
                                        style="height: 50px; margin-top: -5px"
                                        v-decorator="[
                      'password',
                      { rules: [{ required: true, message: '请输入密码！' }] },
                    ]"
                                        @blur="yz"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :md="24" :sm="24" style="margin: 15px 0">
                                <a-form-item label="确认密码">
                                    <a-input
                                        v-model="confirmPassword"
                                        @pressEnter="submit"
                                        style="height: 50px; margin-top: -5px"
                                    />
                                </a-form-item>
                            </a-col>
                            <!-- <a-col :md="24" :sm="24"> -->
                            <!-- <a-form-model-item label="所属小区">
                                <a-select
                                  v-model="registerData.community_id"
                                  placeholder="请选择"
                                  default-value="0"
                                >
                                  <a-select-option :value="0">请选择</a-select-option>
                                  <a-select-option
                                    :value="item.community_id"
                                    v-for="item in community"
                                    :key="item.community_id"
                                  >
                                    {{ item.community_name }}
                                  </a-select-option>
                                </a-select>
                              </a-form-model-item> -->

                            <!-- <a-form-model-item label="店铺所属分类">
                                <a-select
                                  v-model="registerData.class_id"
                                  placeholder="请选择"
                                  default-value="0"
                                >
                                  <a-select-option :value="0">请选择</a-select-option>
                                  <a-select-option
                                    :value="d.id"
                                    v-for="d in cate"
                                    :key="d.id"
                                  >
                                    {{ d.cate_name }}
                                  </a-select-option>
                                </a-select>
                              </a-form-model-item> -->
                            <!-- </a-col> -->
                        </a-row>
                        <div
                            class="btn"
                            @click="submit"
                            style="
                font-size: 18px;
                width: 300px;
                margin-top: 30px;
                height: 40px;
                line-height: 40px;
              "
                        >
                            提交
                        </div>
                        <div
                            class="btn"
                            @click="go_back"
                            style="
                font-size: 18px;
                width: 300px;
                margin-top: 30px;
                height: 40px;
                line-height: 40px;
              "
                        >
                            上一步
                        </div>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {message} from "ant-design-vue";

export default {
    name: "login",
    data() {
        return {
            showFlag: true,
            // 上传图片回显
            imageUrl: "",
            loading: false,
            imageUrl1: "",
            loading1: false,
            form: this.$form.createForm(this),
            form1: this.$form.createForm(this),
            // 注册进度
            progressIndex: 1,
            // 倒计时文本
            countdown: "获取验证码",
            // 计时器flag
            timer: null,
            // 注册提交的数据
            registerData: {
                company_name: "", // 企业名称
                legal_person: "", // 法人代表
                address: "", // 详细地址
                registered_capital: "", // 注册资本
                date_of_establishment: "", // 成立日期
                contact_person: "", // 联系人
                email: "", // 邮箱
                contact_person_mobile: "", // 联系电话
                business_license_no: "", // 营业执照号
                electronic_version_business_license: "", // 营业执照     ---- 图片
                validity_period_business_license: "", // 营业执照有效期
                tax_certificate: "", // 一般纳税人证明    ---- 图片
                username: "", //  手机号
                password: "", // 密码
                code: "", // 验证码
                // class_id: 0,
                // community_id: 0,
                customer_server_phone: 0,
            },
            confirmPassword: "",
            cate: [],
            community: [],
        };
    },
    methods: {
        // 返回上一步
        go_back() {
            this.progressIndex = 1;
        },
        //     密码验证
        yz() {
            console.log("让我们大喊一声奥里给");
            let reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$");
            if (!reg.test(this.registerData.password)) {
                this.registerData.password = "";
                this.showFlag = false;
                setTimeout(() => {
                    this.showFlag = true;
                }, 100);
                console.log(this.registerData.password);
                this.$message.error({
                    content: "密码须同时还有字母和数字，且长度在8-16位之间",
                    duration: 4,
                });
            }
        },
        //    点击提交
        submit() {
            if (!this.confirmPassword) {
                this.$message.warning("请输入确认密码");
                return;
            }
            // 判断确认密码是不是和密码一样
            if (this.registerData.password != this.confirmPassword) {
                this.$message.warning("两次输入密码不一致");
                return;
            }

            // if (this.registerData.community_id == 0) {
            //   this.$message.warning("请选择小区");
            //   return;
            // }
            // if (this.registerData.class_id == 0) {
            //   this.$message.warning("请选择分类");
            //   return;
            // }

            this.form1.validateFields((errors, values) => {
                // console.log('奥里给',values)
                if (!errors) {
                    if (!this.confirmPassword) {
                        this.$message.warning("请输入确认密码");
                        return;
                    }
                    // 判断确认密码是不是和密码一样
                    if (this.registerData.password != this.confirmPassword) {
                        this.$message.warning("两次输入密码不一致");
                        return;
                    }
                    //     开始注册
                    this.$post(this.$api.estateRegister, this.registerData).then(
                        (res) => {
                            // console.log(res);
                            if (res.code == 500) {
                                this.$message.warning(res.msg);
                            } else {
                                this.$message.info(res.msg);
                                this.form.resetFields();
                                this.form1.resetFields();
                            }
                        }
                    );
                }
            });
        },
        //    点击下一步
        nextStep() {
            // 解析时间
            var that = this;
            console.log("打印form", this.form);
            if (!this.registerData.tax_certificate) {
                message.error("纳税人证明为必填项");
                return false;
            }
            this.form.validateFields((errors, values) => {
                console.log(values);
                if (!errors) {
                    // console.log(111);
                    that.registerData.date_of_establishment = that.GMTToStr(
                        that.registerData.date_of_establishment
                    );
                    that.registerData.validity_period_business_license =
                        that.GMTToStr(
                            that.registerData.validity_period_business_license[0]
                        ) +
                        " - " +
                        that.GMTToStr(
                            that.registerData.validity_period_business_license[1]
                        );
                    // console.log(that.registerData.validity_period_business_license);
                    this.progressIndex = 2;
                }
            });
        },
        //   时间转化
        GMTToStr(time) {
            let date = new Date(time);
            let Str =
                (date.getFullYear() < 10
                    ? "0" + date.getFullYear()
                    : date.getFullYear()) +
                "-" +
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) +
                "-" +
                (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
            return Str;
        },
        //    验证码倒计时
        changeCountdown() {
            if (this.countdown != "获取验证码") return;
            this.send_sms();
            this.countdown = 60;
            var that = this;
            this.timer = setInterval(function () {
                that.countdown = parseInt(that.countdown);
                console.log("操作了", that.countdown);
                if (that.countdown <= 0) {
                    clearInterval(that.timer);
                    that.timer = null;
                    that.countdown = "获取验证码";
                    console.log("验证码过期，需要重新获取");
                    return;
                } else {
                    that.countdown--;
                    if (that.countdown < 10) {
                        that.countdown = "0" + that.countdown;
                    }
                }
            }, 1000);
        },

        // 发送短信
        send_sms() {
            if (this.registerData.phone == '') {
                return this.$message.error('手机不能为空.');
            }
            if (this.math > 0) {
                return this.$message.error('不要频繁发送短信.');
            }

            // 发送
            this.$get(this.$api.homeSendSms, {phone: this.registerData.username, name: 'register'}).then(res => {
                if (res.code == 200) {
                    this.math = 60;
                    this.timeObj = setInterval(() => {
                        this.math--;
                        this.code_text = this.math + 's'
                        if (this.math <= 0) {
                            this.code_text = '发送验证码'
                            clearInterval(this.timeObj);
                        }
                    }, 1000);
                }
                return this.$returnInfo(res);
            })


        },
        //     跳转登录页面
        login() {
            this.$router.push({name: "estate_login"});
        },
        //   上传图片
        handleChange(info) {
            if (info.file.status === "uploading") {
                this.loading = true;
                return;
            }
            if (info.file.status === "done") {
                // Get this url from response in real world.
                console.log("上传成功返回数据", info.file.response);
                this.imageUrl = info.file.response.data.url;
                this.registerData.electronic_version_business_license =
                    info.file.response.data.url;
                //console.log('返回的图片地址', this.registerData.business_license);
            }
        },
        handleChange1(info) {
            if (info.file.status === "uploading") {
                this.loading1 = true;
                return;
            }
            if (info.file.status === "done") {
                // Get this url from response in real world.
                //console.log('上传成功返回数据', info.file.response);
                this.imageUrl1 = info.file.response.data.url;
                this.registerData.tax_certificate = info.file.response.data.url;
                //console.log('返回的图片地址', this.registerData.general_taxpayer_certificate);
            }
        },
    },

    created() {
        this.$post(this.$api.getDatas).then((res) => {
            this.cate = res.data.cate;
            this.community = res.data.community;
        });
    },

    mounted() {
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.ant-form-item-label {
    display: inline-block;
    height: 50px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
    line-height: 50px;
}

.avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
    background: #fff;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.ant-col-md-24 {
    height: 60px;
}

.attend {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ff8a00;
    margin-left: 10px;
}

.container {
    width: 100%;
    height: 100%;
    background: url("../../asset/login/register_bg.png");
    background-size: 100%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 96px;
    background-color: #f7f7f7;

    .header_top {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
        height: 100%;
        font-size: 36px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 96px;
        // color: #32c19c;
        color: #fa6531;

        .login {
            cursor: pointer;
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 500;
        }
    }
}

.content {
    width: 1200px;
    margin: 0 auto;

    .progress {
        margin: 13px auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 698px;
        height: 27px;
        margin-bottom: 76px;

        .pic {
            position: relative;
            height: 27px;
            width: 27px;

            & > img {
                display: block;
                width: 100%;
                height: 100%;
            }

            & > span {
                position: absolute;
                left: -40px;
                bottom: -40px;
                margin: auto;
                font-size: 18px;
                width: 107px;
                text-align: center;
                white-space: nowrap;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #666666;
            }
        }

        .jiange {
            height: 2px;
            width: 303px;
            background-color: #999999;
        }

        .active {
            background-color: #46c5a3;
        }
    }

    .componyMsg {
        width: 100%;
        padding: 0 26px;
        box-sizing: border-box;

        .contactPerson {
            .title {
                margin-bottom: 26px;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #333333;
            }

            .biaodan {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
            }
        }

        .zhuceMsg {
            width: 639px;
            margin: 0 auto;

            .title {
                margin-bottom: 26px;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #333333;

                span {
                    display: inline-block;
                    height: 40px;
                    background: linear-gradient(90deg, #f7cb6b, #fba980);
                    padding: 0 20px;
                    border-radius: 20px;
                    margin-left: 20px;
                    color: #fff;
                    line-height: 40px;
                    cursor: pointer;
                }
            }
        }
    }
}

.btn {
    margin: 20px auto 0;
    width: 444px;
    height: 64px;
    // background: linear-gradient(-47deg, #70dac4, #3ec4a7);
    background: linear-gradient(90deg, #f7cb6b, #fba980);
    box-shadow: 2px 8px 9px 0px rgba(138, 138, 138, 0.12);
    border-radius: 32px;
    text-align: center;
    line-height: 64px;
    font-size: 23px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
}

.countBtn {
    width: 92px;
    height: 50px;
    border: none;
    // background: #46c5a3;
    background: linear-gradient(90deg, #f7cb6b, #fba980);
    color: #ffffff;
}
</style>

